import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import {findSearch} from './findSearch.less';
import Moment from 'moment';
import MyListView from '../../components/MyListView/MyListView';
import HotsListItem from './hotsListItem';
import FindFollowItem from './findFollowItem';
import MyScroll from '../../components/MyScroll/MyScroll';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import {routerRedux} from "dva/router";
import {goto_search_title} from "../search/GotoSearch.less";
import {IMAGE_DOMAIN} from "../../utils/common";
import {huati1} from "./publish.less";
import {findFollow} from "./findIndex.less";


const Item = List.Item;


class FindSearch extends Component {
    constructor(props){
        super(props);
        this.state={
            value:"",
            show:false,
            trendsType:""
        }
        this.AlloyTouch = null;

    }


    componentDidMount(){

    }

    refresh = (trendsType) => {
        this.setState({
            trendsType:trendsType,
            show:true
        });
        console.log(trendsType)
        if(trendsType=="picture"||trendsType=="video"||trendsType=="article")
        return this.props.dispatch({ type: 'findOthers/findSerachDetailEFF',obj:{pageNo:1,keyWord:this.state.value,trendsType:trendsType} });
        else if(trendsType=="topic") return this.props.dispatch({ type: 'findOthers/getTalkListEFF',obj:{topicName:this.state.value,pageNo:1} });
        else if(trendsType=="user") return this.props.dispatch({ type: 'findOthers/findSerachUserDetailEFF',obj:{pageNo:1,keyWord:this.state.value} });
    }
    loadMore = () => {
        if (this.state.trendsType == "picture" || this.state.trendsType == "video" || this.state.trendsType == "article")
            return this.props.dispatch({
                type: 'findOthers/findSerachDetailEFF',
                obj: {
                    pageNo: this.props.findOthers.pageNo + 1,
                    keyWord: this.state.value,
                    trendsType: this.state.trendsType
                }
            });
        else if (this.state.trendsType == "topic") return this.props.dispatch({
            type: 'findOthers/getTalkListEFF',
            obj: {topicName: this.state.value, pageNo: this.props.findOthers.pageNo + 1}
        });
        else if(this.state.trendsType == "user")  return this.props.dispatch({
            type: 'findOthers/findSerachUserDetailEFF',
            obj: {
                pageNo: this.props.findOthers.pageNo + 1,
                keyWord: this.state.value,
            }
        });
    };
    // 转为unicode 编码
    encodeUnicode=(str) =>{
        let res = [];
        for ( let i=0; i<str.length; i++ ) {
            res[i] = ( "00" + str.charCodeAt(i).toString(16) ).slice(-4);
        }
        return "\\u" + res.join("\\u");
    }

// 解码
    decodeUnicode=(str)=> {
        str = str.replace(/\\/g, "%");
        return unescape(str);
    }
    Refresh = ()=>{
        return this.refresh(this.state.trendsType);
    };
    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };
    onChange = (e) => {
        this.setState({
            value: e.target.value
        });
    };

    replaceStr = str => {
        var reg = new RegExp(this.state.value,'g');

        var htmlStr = str.replace(reg, (a,b)=>{
            return "<span style=color:#ff0036>"+a+"</span>"
        })
        console.log(str, htmlStr);
        return (
            <span dangerouslySetInnerHTML={{ __html: htmlStr}}></span>
        )
    }


    onSubmit=(v)=>{
        if(this.state.show==true) this.setState({show:"false"});
        this.props.dispatch({type:"findOthers/findSerach",obj:{keyword:v}})
    };
    yu = (a) =>{
        return parseInt(a/60) +" ："+a%60;
    }
    render() {
        const {value,show,trendsType} = this.state;
        const {dispatch} = this.props;
        const {findSerachList,findSerachDetailList,trendsTopicEntities,findSerachUserDetailList} = this.props.findOthers;
        console.log(this.props.findOthers);
        const {trendsMember=[],stTopicNames=[],pictureEntities=[],videoEntities=[],articleEntities=[],trendsGoodsEntities=[]} = findSerachList;
        return ( <Flex direction="column" className={findSearch} style={{height:"100%"}}>
                <Flex className={ goto_search_title }>
                    <Icon type='left' style={{ paddingLeft:'0.1rem' ,width:".5rem",height:".5rem"}} onClick={() => {
                        if(show) this.setState({show:false})
                        else this.props.dispatch(routerRedux.push({
                            pathname:`/findIndex/${1}`
                        }))
                    }}/>
                    <Flex className="search_input">
                        <Icon className="search_icon" style={ value.length > 0 ? { color:"#fff" } : {} } type="search" size="md" />
                        <form action=""
                              // onSubmit={ (e)=>{ this.onSubmit(value),e.preventDefault(); } }
                        >
                            <input placeholder="请输入关键字搜索" autoFocus type="search" value={ value } onChange={this.onChange} />
                        </form>
                    </Flex>
                    {
                        value.length > 0 ?
                            <div className="search_cancelbtn" onClick={ ()=>{ this.onSubmit(value) } }>搜索
                            </div> :
                            <div className="search_cancelbtn" onClick={() => { this.props.dispatch(routerRedux.goBack()); }}>取消
                            </div>
                    }
                </Flex>
                {show==false?<MyScroll>
                    {trendsMember[0]&&<div style={{background:"#fff",margin:".2rem 0"}}>
                        <WingBlank>
                            <WhiteSpace></WhiteSpace>
                            <div style={{fontSize:".3rem"}}>用户</div>
                            <WhiteSpace></WhiteSpace>
                            {trendsMember.map((m,one)=>{
                                return <Flex key={one} onClick={()=>{
                                    if (parseInt(m.isMe)==1){
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`/personHome/${-1}/${0}`
                                        }))
                                    }else {
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`/personHome/${m.memberId}/${0}`
                                        }))
                                    }
                                }} style={{padding:".3rem 0",borderBottom:"1px solid #e5e5e5"}}>
                                    <div style={{borderRadius:"100%",width:"1rem",height:"1rem",marginRight:".2rem"}}>
                                        <NoLazyImg src={m.memberAvatar} style={{borderRadius:"100%",width:"1rem",height:"1rem"}}></NoLazyImg>
                                    </div>
                                    <div>
                                        { this.replaceStr(m.memberName) }
                                    </div>
                                </Flex>
                            })}
                            <WhiteSpace></WhiteSpace>
                            <Flex justify="between" onClick={()=>{
                                this.refresh("user")
                            }}>
                                <Flex>
                                    <Icon type="search" style={{marginRight:".2rem",color:"#999"}}></Icon>
                                    <div>查看更多用户</div>
                                </Flex>
                                <Icon type="right"></Icon>
                            </Flex>
                            <WhiteSpace></WhiteSpace>
                        </WingBlank>
                    </div>
                    }
                    {pictureEntities[0]&&<div style={{background:"#fff",marginBottom:".2rem"}}>
                        <WingBlank>
                            <WhiteSpace></WhiteSpace>
                            <div style={{fontSize:".3rem"}}>图文</div>
                            <WhiteSpace></WhiteSpace>
                            {pictureEntities.map((p,two)=>{
                                console.log(p.pictures)
                                return <Flex key={two} onClick={()=>{
                                    // this.props.dispatch({ type: 'findOthers/save', data: { findDetail: v}})
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/findDetail/${p.trendsId}/${0}`
                                    }))
                                }} style={{padding:".3rem 0",fontSize:".3rem",borderBottom:"1px solid #e5e5e5"}}>
                                    {p.pictures!=""? <div style={{width:"2.5rem",height:"2rem",marginRight:".2rem",position:"relative"}}>
                                        <NoLazyImg src={p.pictures.split(",")[0]} style={{width:"2.5rem",height:"2rem"}}></NoLazyImg>
                                        <div className="liulan">{p.views}次浏览</div>
                                    </div>:""}
                                    <div >
                                        <div className="picContent" >
                                            {p.topicName&&p.topicName.split(",").map((va,ia)=>{
                                                return <span style={{color:"#ff0036",marginRight:".1rem",marginBottom:".1rem"}} onClick={(e)=>{
                                                    e.stopPropagation();
                                                    this.props.dispatch(routerRedux.push({
                                                        pathname:`/topicPage/${this.decodeUnicode(va)}`
                                                    }))
                                                }} key={ia}>
                                                #{this.decodeUnicode(va)}#
                                            </span>
                                            }) }
                                            {this.replaceStr(p.content)}
                                        </div>
                                        <Flex style={{color:"#666666"}}>
                                            <div style={{marginRight:".2rem"}}>{p.memberName}</div>
                                            <div>{Moment(p.createTime).format('YYYY-MM-DD')}</div>
                                        </Flex>
                                    </div>
                                </Flex>
                            })}
                            <WhiteSpace></WhiteSpace>
                            <Flex justify="between" onClick={()=>{
                                this.refresh("picture");
                            }}>
                                <Flex>
                                    <Icon type="search" style={{marginRight:".2rem",color:"#999"}}></Icon>
                                    <div>查看更多图文</div>
                                </Flex>
                                <Icon type="right"></Icon>
                            </Flex>
                            <WhiteSpace></WhiteSpace>
                        </WingBlank>
                    </div>
                    }
                    {articleEntities[0]&&<div style={{background:"#fff",marginBottom:".2rem"}}>
                        <WingBlank>
                            <WhiteSpace></WhiteSpace>
                            <div style={{fontSize:".3rem"}}>文章</div>
                            <WhiteSpace></WhiteSpace>
                            {articleEntities.map((p,two)=>{
                                return <Flex key={two} onClick={()=>{
                                    // this.props.dispatch({ type: 'findOthers/save', data: { findDetail: v}})
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/findDetail/${p.trendsId}/${0}`
                                    }))
                                }} style={{padding:".3rem 0",fontSize:".3rem",borderBottom:"1px solid #e5e5e5"}}>
                                    {p.cover!=""? <div style={{width:"2.5rem",height:"2rem",marginRight:".2rem",position:"relative"}}>
                                        <NoLazyImg src={p.cover} style={{width:"2.5rem",height:"2rem"}}></NoLazyImg>
                                        <div className="liulan">{p.views}次浏览</div>
                                    </div>:""}
                                    <div>
                                        <div className="picContent" >
                                            {this.replaceStr(p.articleTitle)}
                                        </div>
                                        <Flex style={{color:"#666666"}}>
                                            <div style={{marginRight:".2rem"}}>{p.memberName}</div>
                                            <div>{Moment(p.createTime).format('YYYY-MM-DD')}</div>
                                        </Flex>
                                    </div>
                                </Flex>
                            })}
                            <WhiteSpace></WhiteSpace>
                            <Flex justify="between" onClick={()=>{
                                this.refresh("article");
                            }}>
                                <Flex>
                                    <Icon type="search" style={{marginRight:".2rem",color:"#999"}}></Icon>
                                    <div>查看更多文章</div>
                                </Flex>
                                <Icon type="right"></Icon>
                            </Flex>
                            <WhiteSpace></WhiteSpace>
                        </WingBlank>
                    </div>
                    }
                    {videoEntities[0]&&<div style={{background:"#fff",marginBottom:".2rem"}}>
                        <WingBlank>
                            <WhiteSpace></WhiteSpace>
                            <div style={{fontSize:".3rem"}}>视频</div>
                            <WhiteSpace></WhiteSpace>
                            {videoEntities.map((p,two)=>{
                                return <Flex key={two}  style={{padding:".3rem 0",fontSize:".3rem",borderBottom:"1px solid #e5e5e5"}}>
                                    <div style={{width:"100%"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`/findDetail/${p.trendsId}/${0}`
                                        }))
                                    }}>
                                        <div className="vidContent" >
                                            {this.replaceStr(p.content)}
                                        </div>
                                        <Flex style={{position:"relative"}}>
                                            <video src={IMAGE_DOMAIN+p.videos} controls width="100%" height=".4rem"/>
                                            <div className="bofang">{p.views>=10000?p.views/10000+"万":p.views}次播放</div>
                                            <div className="shichang">{this.yu(p.videosSize)}</div>
                                        </Flex>
                                    </div>
                                </Flex>
                            })}
                            <WhiteSpace></WhiteSpace>
                            <Flex justify="between" onClick={()=>{
                                this.refresh("video");
                            }}>
                                <Flex>
                                    <Icon type="search" style={{marginRight:".2rem",color:"#999"}}></Icon>
                                    <div>查看更多视频</div>
                                </Flex>
                                <Icon type="right"></Icon>
                            </Flex>
                            <WhiteSpace></WhiteSpace>
                        </WingBlank>
                    </div>
                    }
                    {stTopicNames[0]&&<div style={{background:"#fff",margin:".2rem 0"}}>
                        <WingBlank>
                            <WhiteSpace></WhiteSpace>
                            <div style={{fontSize:".3rem"}}>话题</div>
                            <WhiteSpace></WhiteSpace>
                            {stTopicNames.map((m,one)=>{
                                return <Flex key={one} onClick={(e)=>{
                                    e.stopPropagation();
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/topicPage/${m.name}`
                                    }))
                                }} style={{padding:".3rem 0",borderBottom:"1px solid #e5e5e5"}}>
                                    <div>
                                        #{this.replaceStr(m.name)}#
                                    </div>
                                </Flex>
                            })}
                            <WhiteSpace></WhiteSpace>
                            <Flex justify="between" onClick={()=>{
                                this.refresh("topic");
                            }}>
                                <Flex>
                                    <Icon type="search" style={{marginRight:".2rem",color:"#999"}}></Icon>
                                    <div>查看更多话题</div>
                                </Flex>
                                <Icon type="right"></Icon>
                            </Flex>
                            <WhiteSpace></WhiteSpace>
                        </WingBlank>
                    </div>
                    }
                    {trendsGoodsEntities[0]&&<div style={{background:"#fff",marginBottom:".2rem"}}>
                        <WingBlank>
                            <WhiteSpace></WhiteSpace>
                            <div style={{fontSize:".3rem"}}>商品</div>
                            <WhiteSpace></WhiteSpace>
                            {trendsGoodsEntities.map((p,two)=>{
                                return <Flex key={two} style={{padding:".3rem 0",fontSize:".3rem",borderBottom:"1px solid #e5e5e5"}}>
                                    {p.goodsImage!=""? <div style={{width:"2rem",height:"2rem",marginRight:".2rem"}}>
                                        <NoLazyImg src={p.goodsImage} style={{width:"2rem",height:"2rem"}}></NoLazyImg>
                                    </div>:""}
                                    <div style={{width:"100%"}}>
                                        <div className="picContent" >
                                            {this.replaceStr(p.goodsName)}
                                        </div>
                                        <Flex style={{color:"#ff0036",width:"100%"}} justify="between">
                                            <div >¥{p.goodsPrice}</div>
                                            <div style={{borderRadius:".4rem",border:"1px solid #ff0036",padding:".1rem .2rem"}} onClick={()=>{
                                                this.props.dispatch(routerRedux.push({pathname: `/goodsDetail/${p.specId}`}))
                                            }}>去购物</div>
                                        </Flex>
                                    </div>
                                </Flex>
                            })}
                            <WhiteSpace></WhiteSpace>
                            <Flex justify="between" onClick={()=>{
                                this.props.dispatch(routerRedux.push(`/goodsearch/keywordSearch?keyword=${encodeURIComponent(value)}&showKeyword=${encodeURIComponent(value)}`));
                            }}>
                                <Flex>
                                    <Icon type="search" style={{marginRight:".2rem",color:"#999"}}></Icon>
                                    <div>查看更多商品</div>
                                </Flex>
                                <Icon type="right"></Icon>
                            </Flex>
                            <WhiteSpace></WhiteSpace>
                        </WingBlank>
                    </div>
                    }
                </MyScroll>:<MyListView
                    getAlloyTouch={ this.getAlloyTouch }
                    refresh={ this.Refresh }
                    loadMore={ this.loadMore }
                    hasMore={ this.props.findOthers.pageNo * this.props.findOthers.pageSize < this.props.findOthers.totalRows  }
                    // itemWrapperClass={ goods_list }
                    // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                    renderItem={(v,i,a)=>{
                        if(trendsType=="picture"||trendsType=="video"||trendsType=="article")
                        return <HotsListItem dispatch={dispatch}  v={v} key={i}  Refresh={ this.Refresh }></HotsListItem>
                        else if(trendsType=="topic"){
                            return <WingBlank key={i}  style={{padding:".2rem 0",borderBottom:"1px solid #e5e5e5"}}>
                                <Flex onClick={(e)=>{
                                    e.stopPropagation();
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/topicPage/${this.decodeUnicode(v.name)}`
                                    }))
                                }}>
                                    {v.logo?<NoLazyImg src={v.logo} style={{width:"1.5rem",height:"1.5rem",marginRight:".2rem"}}></NoLazyImg>: <Flex justify="center" className={huati1} >
                                        {this.decodeUnicode(v.name)[0]}
                                    </Flex>}
                                    <Flex align="start" style={{color:"#333",width:"60%"}}>
                                        #{this.decodeUnicode(v.name)}#
                                    </Flex>
                                    <Flex>
                                        #话题
                                    </Flex>
                                </Flex>
                            </WingBlank>
                        }else if(trendsType=="user"){
                            return  <div className={findFollow} key={i} style={{background:"#fff"}} onClick={()=>{
                                if (parseInt(v.isMe)==1){
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/personHome/${-1}/${0}`
                                    }))
                                }else {
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/personHome/${v.memberId}/${0}`
                                    }))
                                }
                            }}>
                                <WingBlank>
                                    <Flex justify="between" style={{borderBottom:"1px solid #e5e5e5",paddingTop:".2rem",paddingBottom:".2rem"}}>
                                        <Flex style={{width:"70%"}}>
                                            <div style={{width:".8rem",height:".8rem",borderRadius:"100%",marginRight:".2rem"}}>
                                                <NoLazyImg src={v.connerImage!=undefined?v.connerImage:""}  style={{width:".8rem",height:".8rem",borderRadius:"100%"}}></NoLazyImg>
                                            </div>
                                            <div>
                                                <div style={{fontSize:".3rem"}}>{v.concernName}</div>
                                                <Flex justify="between" style={{color:"#999",margin:".2rem 0"}}>
                                                    <div style={{marginRight:".2rem"}}>粉丝数{v.fansNum}</div>
                                                    <div>发布{v.pieceNum }篇</div>
                                                </Flex>
                                                <div style={{fontSize:".27rem",overflow: "hidden",
                                                    textOverflow:"ellipsis",
                                                    whiteSpace: "nowrap"}}>{v.connet}</div>
                                            </div>
                                        </Flex>
                                        <div className={v.isConner ==0?"guanzhu1":"guanzhu"} onClick={()=>{
                                            this.props.dispatch({type:"findOthers/connerFollowEFF",obj:{connerId:v.concernId   }}).then(result=>{
                                                if(result.code==200){
                                                    Toast.success(result.msg,1.5,()=>{
                                                        this.Refresh();
                                                    })
                                                }
                                            })
                                        }}>{v.isConner ==0?"关注":"已关注"}</div>
                                    </Flex>
                                </WingBlank>
                            </div>
                        }
                    }}
                    data={ trendsType=="picture"||trendsType=="video"||trendsType=="article"?findSerachDetailList:trendsType=="topic"? trendsTopicEntities:findSerachUserDetailList}>
                </MyListView>}

            </Flex>

        )


    }
}

export default connect(({ findOthers }) => ({ findOthers}))(FindSearch);